<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/head.jspf"%>
<script src="<%=basePath%>/script/jquery_treeview/jquery.treeview.js"></script>
<link type="text/css" rel="stylesheet"
	href="<%=basePath%>/style/blue/file.css" />
<link type="text/css" rel="stylesheet"
	href="<%=basePath%>/script/jquery_treeview/jquery.treeview.css" />
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>设置权限</title>
<script type="text/javascript">
function selectAll(checked){
	$("[name='permissionIds']").attr("checked",checked);
}
$(function(){
	$("[name='permissionIds']").click(function(){
		//选择或取消某个复选框的时候，选中或取消他的所有子节点。
		$(this).siblings("ul").find("[name='permissionIds']").attr("checked",$(this).attr("checked"));
		//选择某个子节点的时候，选择所有父辈元素
		if($(this).attr("checked")){
			$(this).parents("ul").siblings("[name='permissionIds']").attr("checked",true);
		}
	})
	
})

</script>
</head>
<body>
	<!-- 标题显示 -->
	<div id="Title_bar">
		<div id="Title_bar_Head">
			<div id="Title_Head"></div>
			<div id="Title">
				<!--页面标题-->
				<img border="0" width="13" height="13"
					src="<%=basePath%>/style/images/title_arrow.gif" /> 配置权限
			</div>
			<div id="Title_End"></div>
		</div>
	</div>

	<!--显示表单内容-->
	<div id=MainArea>
		<s:form action="role_setpermission">
			<s:hidden name="id"></s:hidden>
			<div class="ItemBlock_Title1">
				<!-- 信息说明 -->
				<div class="ItemBlock_Title1">
					<img border="0" width="4" height="7"
						src="<%=basePath%>/style/blue/images/item_point.gif" />
					正在为【${name }】配置权限
				</div>
			</div>

			<!-- 表单内容显示 -->
			<div class="ItemBlockBorder">
				<div class="ItemBlock">
					<table cellpadding="0" cellspacing="0" class="mainForm">
						<!--表头-->
						<thead>
							<tr align="LEFT" valign="MIDDLE" id="TableTitle">
								<td width="300px" style="padding-left: 7px;">
									<!-- 如果把全选元素的id指定为selectAll，并且有函数selectAll()，就会有错。因为有一种用法：可以直接用id引用元素 -->
									<input type="checkbox" id="cbSelectAll"
									onClick="selectAll(this.checked)" /> <label for="cbSelectAll">全选</label>
								</td>
							</tr>
						</thead>

						<!--显示数据列表-->
						<tbody id="TableData">
							<tr class="TableDetail1">
								<!-- 显示权限树 -->
								<td>
									<ul id='tree'>
										<s:iterator value="#pList">
											<li>
											<input type='checkbox' id="${id}"  value="${id}" <s:property value="%{id in permissionIds ? 'checked' : ''}"/> name="permissionIds" /> 
											<s:label for="%{id}" value="%{name}"><span class='folder' id='45'></span></s:label>
												<ul>
													<s:iterator value="children">
														<li>
														<input type='checkbox' value="${id}" id="${id}" <s:property value="%{id in permissionIds ? 'checked' : ''}"/>  name="permissionIds" /> 
														<s:label for="%{id}" value="%{name}"><span class='folder' id='45'></span></s:label>
															<ul>
																<s:iterator value="children">
																	<li>
																		<input type='checkbox' value="${id}" id="${id}" <s:property value="%{id in permissionIds ? 'checked' : ''}"/>  name="permissionIds" /> 
																		<s:label for="%{id}" value="%{name}"><span class='folder' id='45'></span></s:label>
																	</li>
																</s:iterator>
															</ul>
														</li>
													</s:iterator>
												</ul>
											</li>
										</s:iterator>
									</ul>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>

			<!-- 表单操作 -->
			<div id="InputDetailBar">
				<input type="image" src="<%=basePath%>/style/images/save.png" /> <a
					href="javascript:history.go(-1);"><img
					src="<%=basePath%>/style/images/goBack.png" /></a>
			</div>
		</s:form>
	</div>

	<div class="Description">
		说明：<br /> 1，选中一个权限时：<br /> &nbsp;&nbsp;&nbsp;&nbsp; a，应该选中 他的所有直系上级。<br />
		&nbsp;&nbsp;&nbsp;&nbsp; b，应该选中他的所有直系下级。<br /> 2，取消选择一个权限时：<br />
		&nbsp;&nbsp;&nbsp;&nbsp; a，应该取消选择 他的所有直系下级。<br />
		&nbsp;&nbsp;&nbsp;&nbsp; b，如果同级的权限都是未选择状态，就应该取消选中他的直接上级，并递归向上做这个操作。<br />

		3，全选/取消全选。<br /> 4，默认选中当前岗位已有的权限。<br />
	</div>

</body>
</html>